<!--
 * @Author: your name
 * @Date: 2020-09-01 00:58:27
 * @LastEditTime: 2020-09-01 22:38:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \data-paltform\src\views\components\RPAServer\RPAServer.vue
-->
<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div>
        <div class="logoDiv">
          <a class="logo" href="#"></a>
        </div>
        <div style="height: 64px;">
          <span>
            <img class="img-circle" src="../../../assets/imgs/touxiang.jpg" />
          </span>
        </div>
        <div>
          <span class="logo-name">ALLAN</span>
        </div>
        <div>
          <span class="logo-name">超级管理员</span>
        </div>
        <a-menu
          :inlineIndent="inlineIndent"
          :defaultSelectedKeys="[$route.path]"
          mode="inline"
          :inline-collapsed="collapsed"
          @click="menuClick"
          theme="dark"
        >
          <!-- 菜单遍历的开始 -->
          <template v-for="item in list">
            <!-- 如果当前遍历项没有children，视为子菜单项，注意所有的key都是path用于路由跳转，以及当前选中记录 -->
            <a-menu-item :key="item.path" v-if="!item.children">
              <a-icon :type="item.icon" />
              <span>{{ item.title }}</span>
            </a-menu-item>

            <a-sub-menu :key="item.path" v-else>
              <span slot="title">
                <a-icon type="mail" />
                <span>{{ item.title }}</span>
              </span>
              <a-menu-item :key="item1.path" v-for="item1 in item.children">
                {{ item1.title }}
              </a-menu-item>
            </a-sub-menu>
          </template>
        </a-menu>
      </div>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <div>
          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
          />
        </div>
        <div style="width: 100%;">
          <div style="float:right;margin-right: 20px;">
            <a style="margin-right: 10px" href="#">团队中心</a>
            <a href="/">注销</a>
          </div>
        </div>
      </a-layout-header>
      <a-layout>
        <a-layout-content
          :style="{
            margin: '24px 16px',
            padding: '24px',
            background: '#fff',
            minHeight: '280px'
          }"
        >
          <router-view />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  data() {
    // const { lang } = this.$route.params
    return {
      // 菜单缩进
      inlineIndent: 12,
      // 默认不折叠
      collapsed: false,
      // 全部顶级父节点,用来控制所有父级菜单只展开其中的一项，可用遍历菜单信息进行赋值
      rootSubmenuKeys: ['/RPAServerHome', '/TaskList', '/1', '/2', '/3', '/4'],
      // 展开的父菜单项
      openKeys: [],
      // 选中的子菜单项
      defaultSelectedKeys: [this.$route.path],
      // 菜单信息，可从后台获取
      list: [
        {
          key: '1',
          title: '主 页',
          path: '/RPAServerHome',
          breadcrumbName: '主页',
          icon: 'user',
          children: [
            {
              key: '1.1',
              title: '总览',
              path: '/RPAServerHome',
              icon: 'user'
            },
            {
              key: '1.2',
              title: '任务列表',
              path: '/TaskList',
              icon: 'user'
            },
            {
              key: '1.3',
              title: 'Demo开发',
              path: '/DemoDevelopment',
              icon: 'user'
            }
          ]
        },
        {
          key: '2',
          title: '设计器',
          path: '/2',
          icon: 'video-camera'
          // children: [
          //   {
          //     key: '2.1',
          //     title: '安全风险管理',
          //     path: '/safeRisk',
          //     icon: ''
          //   }
          // ]
        },
        {
          key: '3',
          title: '控制台',
          path: '/3',
          icon: 'upload'
          // children: [
          //   {
          //     key: '3.1',
          //     title: '质量控制点管理',
          //     path: '/controlPointManage',
          //     icon: ''
          //   }
          // ]
        },
        {
          key: '4',
          title: '分 析',
          path: '/4',
          icon: 'upload'
          // children: [
          //   {
          //     key: '3.1',
          //     title: '质量控制点管理',
          //     path: '/controlPointManage',
          //     icon: ''
          //   }
          // ]
        },
        {
          key: '5',
          title: '释 放',
          path: '/5',
          icon: 'upload'
          // children: [
          //   {
          //     key: '3.1',
          //     title: '质量控制点管理',
          //     path: '/controlPointManage',
          //     icon: ''
          //   }
          // ]
        },
        {
          key: '6',
          title: '系 统',
          path: '/6',
          icon: 'upload'
          // children: [
          //   {
          //     key: '3.1',
          //     title: '质量控制点管理',
          //     path: '/controlPointManage',
          //     icon: ''
          //   }
          // ]
        }
      ]
    }
  },
  methods: {
    menuClick({ item, key, keyPath }) {
      console.log(item)
      console.log(key)
      console.log(keyPath)
      // 获取到当前的key,并且跳转
      this.$router.push({
        path: key
      })
    }
  }
}
</script>
<style>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>
